<template>
	<view>
		<view class="search">
			<navigator url="/pages/mall/search" class="input">
				<image class="icon" />
				<text class="txt">商品搜索</text>
			</navigator>
		</view>

		 <view class="m-menu">
			<view  class="item" v-for="(item,index) in productCategorys" :key="item.productCategoryId" @click="goCategory(item.productCategoryId)">
			  <image :src="item.categoryImageUrl" background-size="cover" ></image>
			  <text>{{item.categoryName}}</text>
			</view>
		  </view>
		<view style="text-align: center;margin-top: 5px; margin-bottom: 5px;">---推荐爆款---</view>
		<view class="product-list">
			<view class="product-item" v-for="(product,index2) in products " :key="product.productId" @click="goDetail(product.productId)">
				<product :data="product"></product>
			</view>
			

		</view>
		<load-more :loadingType="loadingType" :contentText="contentText"></load-more>


	</view>
</template>
<script>
	import product from '@/components/product.vue';
	import {
		categorys
	} from '@/api/mall/category';
	import {
		getProductBycategory
	} from '@/api/mall/product';
	import {
		getUrl
	} from '@/common/oss.js';
	import loadMore from '@/components/load-more.vue'
	export default {

		data() {
			return {
				titleText: "商城",
				statusColor: "",
				showLeftButton: false,
				pageLoaded: false,
				productCategorys: [],
				defaultCategoryId: "",
				params: [],
				products: [],
				page: 1,
				pageSize: 10,
				orderBy: "PRODUCT_ID",
				sort: "desc",
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		components: {
			product,
			loadMore
		},
		onLoad: function() {
			this.loadCategory();
		},
		onUnload: function() {
			this.showTileBar = true;
			this.showRightButton = false;
			this.statusColor = "#7C4BF9";
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.loadProduct(this.pageSize, this.page, this.orderBy, this.sort);
		},
		onReachBottom: function() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.loadProduct(this.pageSize, this.page, this.orderBy, this.sort);
		},
		onNavigationBarButtonTap: function(e) {
			if(e.index ==0 ){
				uni.navigateTo({
					url: "/pages/mall/search"
				})
			}
			else if(e.index == 1) {
				this.scanCode();
			}
			console.log("onNavigationBarButtonTap:"+ e.index)
		},
		methods: {
			scanCode: function () {
				var that = this
				uni.scanCode({
					success: function (res) {
						
						console.log("res.result..."+ res.result)
						uni.navigateTo({
							url: "/pages/mall/detail?typeId=2&navigateValue=" + res.result
						})
					},
					fail: function (res) {}
				})
			},
			loadCategory: function() {
				var that = this;
				categorys("SEX_CATEGORY").then(function(res) {
//					console.log("SEX_CATEGORY:" + JSON.stringify(res));
					if (res !== null) {
						for (var i = 0; i < res.length; i++) {
							if (res[i].ordersNo > 1) {
								if (res[i].categoryImageUrl.indexOf("img/mall") > 0) {
									res[i].categoryImageUrl = "../../../static/image/mall/" + res[i].productCategoryId + ".png";
								}
								that.productCategorys.push(res[i]);
							} else {
								that.defaultCategoryId = res[i].productCategoryId;
							}

						}

						that.loadProduct(that.pageSize, that.page, that.orderBy, that.sort)
					}

				})
			},
			loadProduct: function(pageSize, page, orderBy, sort) {
				var that = this;
				let query = {};
				query.page = page;
				query.limit = pageSize;
				query.orderBy = orderBy;
				query.sort = sort;

				getProductBycategory(that.defaultCategoryId, query).then(function(res) {
			
					if (res.status == 200 && res.data.length > 0) {
						
			
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].baseUrl = getUrl();
							var prices = res.data[i].productPrices.sort(function(a, b) {
								return a.price > b.price
							})
							if (prices.length > 0) {
								res.data[i].maxPrice = prices[0].price;
								res.data[i].minPrice = prices[prices.length - 1].price;
								res.data[i].tip = "自营"
								that.products.push(res.data[i])
							}
						}
					}

					that.page++;
					that.pageLoaded = true;
					that.loadingType = 0;
				}).catch(err => {
					that.loadingType = 0;
				})
			},
			goCategory: function(e) {
				let productCategoryName = this.productCategorys.find(p => p.productCategoryId == e)
				uni.navigateTo({
					url: "/pages/mall/search?type=1&navigateValue=" + e + "&navigateName="+productCategoryName
				})
			},
			goDetail: function(e) {
				uni.navigateTo({
					url: "/pages/mall/detail?typeId=1&navigateValue=" + e
				})
			}

		}
	}
</script>

<style>
	@import "../../../common/uni.css";

	.search {
		height: 88upx;
		width: 750upx;
		background: #fff;
		display: flex;
		align-items: center;
	}

	.search .input {
		width: 720upx;
		height: 56upx;
		background: #ededed;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 24upx;
	}

	.search .icon {
		background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png) center no-repeat;
		background-size: 100%;
		width: 28upx;
		height: 28upx;
	}

	.search .txt {
		height: 42upx;
		line-height: 42upx;
		color: #666;
		padding-left: 5upx;
		font-size: 30upx;
	}

	.product-list {
		display: flex;
		width: 750upx;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.product-item {
		width: 375upx;
	}
	
	.m-menu {
  display: flex;
  height: 181upx;
  width: 750upx;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}
.m-menu .item {
  flex: 1;
  display: block;
  padding: 20upx 0;
}
.m-menu image {
  display: block;
  width: 58upx;
  height: 58upx;
  margin: 0 auto;
  margin-bottom: 12upx;
}
.m-menu text {
  display: block;
  font-size: 24upx;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
  color: #333;
}
</style>
